<template>
  <!-- etka接收配件选择现有订单 -->
  <div>
    <TopFilter ref="topFilter" :list="topFilterList" :collapse="false" @filterChange="handleFilter"></TopFilter>
    <FilterTable
      ref="table"
      :fetchapi="fetchapi"
      :params="fetchParams"
      selectionType="single"
      :datakey="'rows'"
      :columns="columns"
      columnsRef="partPartPurchasePurchaseOrderMainEtkaPartChsoeOrder"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="handleTableRowSelect"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfim">确认</el-button>
    </div>
  </div>
</template>

<script>
import { queryAllOrderTypeInfo, queryOrderList } from '@/api/part/partPurchase/purchaseOrder';
import { queryBusinessCustomer } from '@/api/part/partInfoManage/contactsCustomer';
import { dictionary } from '@/utils/dictMixin';

export default {
  mixins: [dictionary],
  props: {
    isEtka: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchapi: queryOrderList,
      fetchParams: { xhrAbort: false },
      orderTypeData: {}, // 订单类型对象(用来回显订单类型)
      selectedTableData: [] // 选中的table数据
    };
  },
  created() {
    this.queryAllOrderType();
    this.queryAllSupplyComp();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          fieldName: 'startDCreate|endDCreate',
          label: '制单日期'
        },
        {
          type: 'INPUT',
          fieldName: 'orderNo',
          label: '订单编号'
        },
        {
          type: 'SELECT',
          label: '订单类型',
          fieldName: 'orderType',
          itemList: []
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '订单编号',
          dataIndex: 'orderNo',
          filter: true,
          filterType: 'input'
        },
        {
          title: '订单类型',
          dataIndex: 'originalOrderType',
          render: params => {
            return <span>{this.orderTypeData[params.row.originalOrderType]}</span>;
          },
          filter: true,
          filterType: 'input'
        },
        {
          title: '订单状态',
          dataIndex: 'vOrderStatus',
          filter: true,
          filterType: 'input',
          dictItems: this.createDictList(8133)
        },
        // {
        //   title: '性质',
        //   dataIndex: 'a4'
        // },
        {
          title: '制单日期',
          dataIndex: 'dCreate',
          dateFormat: 'yyyy-MM-dd',
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '供应商名称',
          dataIndex: 'nSupplyId',
          filter: true,
          filterType: 'input',
          dictItems: []
        }
      ];
    },
    // 查询所有订单类型
    async queryAllOrderType() {
      let res = await queryAllOrderTypeInfo();
      let obj = {};
      let arr = res.data.map(item => {
        obj[item.partTypeId] = item.partTypeName;
        return { text: item.partTypeName, value: item.partTypeId };
      });
      this.orderTypeData = obj;
      this.topFilterList.find(item => item.fieldName == 'orderType').itemList = arr;
    },
    // 查询所有供应商
    async queryAllSupplyComp() {
      let res = await queryBusinessCustomer();
      if (res.resultCode == 200) {
        this.columns.find(item => item.dataIndex == 'nSupplyId').dictItems = res.data.rows.map(item => ({ text: item.customerName, value: item.customerCode }));
      }
    },
    // 点击搜索或者重置
    handleFilter(e) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, e, {
        xhrAbort: false
      });
      console.log(e);
    },
    // table行项选中
    handleTableRowSelect(e) {
      this.selectedTableData = e;
    },
    // 点击确定
    handleConfim() {
      console.log(this.selectedTableData, '选中的订单行项数据');
      if (this.selectedTableData.length) {
        this.$emit('onConfirm', this.selectedTableData);
      }
    },
    handleCancle() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
